<template>
    <h1>app组件</h1>

    <!--
        v-model
            一个内置指令, 具有双向绑定的功能

                1. 你在页面修改了 输入框, 会影响我们代码中的数据
                2. 你在代码中修改了数据, 会影响页面的输入框
     -->
    名字: <input type="text" v-model="nameValue" /> 年龄:
    <input type="text" v-model.number="ageValue" />

    <button @click="addUser">注册用户</button>

    <ul>
        <!--
            key 属性一般我们在 循环遍历的时候都会书写
            这个 key 的值一定需要是一个唯一值

            一般都是用 数据的 ID 属性

            如果是在没有 id, 我们可以选择 index

                为什么不建议书写 index

                    因为 index 代表的是下标, 下标就是数组中某一个位置的值是什么, 下标和数据没有必然的联系
                    如果将来我们对这个数组靠前或者中间的某一个元素, 做了删减的操作, 会出现 数组塌陷
         -->
        <li v-for="item in list" :key="item.id">
            <input type="checkbox" />
            <span>{{ item.name }} --- {{ item.age }}</span>
        </li>
    </ul>

    <!--
        vue 中 v-for 和 v-if 能不能一起使用

            在 vue2 中, 因为 v-for 的优先级会比 v-if 要高, 所以当一个标签同时具有 v-for 和 v-if 的时候, 会先运行 v-for
                所以 在 vue2 中禁止同一个标签使用 v-for 和 v-if

            在 vue3 中, vue 调整了 v-if 的优先级, 所以在 vue3 中可以同时使用 v-for 和 v-if, 但是我们开发习惯上不会出现 v-for 和 v-if 同时使用
     -->
</template>

<script>
export default {
    // 专门存储响应式数据
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: "张三",
                    age: 18,
                },
            ],
            nameValue: "",
            ageValue: "",
        };
    },
    // 专门存储 我们的 事件函数
    methods: {
        addUser() {
            // 1. 获取输入框的值
            // console.log(this.nameValue, this.ageValue)

            // 2. 组装一个对象
            const userInfo = {
                name: this.nameValue,
                age: this.ageValue,
                id: this.list[this.list.length - 1].id + 1,
            };

            // 3. 添加到 list 中
            this.list.unshift(userInfo);

            // 4. 清空输入框的文本
            this.nameValue = "";
            this.ageValue = "";
        },
    },
};
</script>
